 <template>
    <div>
            <!--检索-->
        <el-form :inline="true" :model="ClientVo" class="demo-form-inline">
            <el-col :span="4">
                <el-input v-model="ClientVo.username" placeholder="请输入账号"></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model="ClientVo.name" placeholder="请输入昵称"></el-input>
            </el-col>
            <el-col :span="8"
            ><div>
                <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
            </div>
            </el-col>
            <el-col :span="7">
<!--                <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>-->

<!--                <el-button type="success" @click="exportBtn" icon="el-icon-download">导出</el-button>-->
<!--                <el-button size="small" type="primary">导入</el-button>-->
<!--                <el-upload class="upload-demo" action="http://localhost:9999/mbs/client/importExcel" style="width: 5px ;margin-top: -32px;margin-left: 160px">-->
<!--                    <el-button size="small" type="primary">导入</el-button>-->
<!--                </el-upload>-->
            </el-col>
        </el-form>

            <!--功能列表-->
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column align="center" type="index" prop="id" label="#" fixed> </el-table-column>
            <el-table-column align="center" prop="username" label="账号"> </el-table-column>
<!--            <el-table-column align="center" prop="password" label="密码"> </el-table-column>-->
            <el-table-column align="center" prop="name" label="昵称"> </el-table-column>
            <el-table-column align="center" prop="headPic" label="头像" width="100px">
                <template slot-scope="scope">
                    <img :src="scope.row.headPic" width="80px">
                </template>
            </el-table-column>

            <el-table-column align="center" prop="sex" label="性别">
                <template slot-scope="scope">
                    <p v-if="scope.row.sex=='1' ">
                        女
                    </p >
                    <p v-else-if="scope.row.sex=='0'">
                        男
                    </p >
                </template>
            </el-table-column>

            <el-table-column align="center" prop="phoneNum" label="手机号"> </el-table-column>
            <el-table-column align="center" prop="accountBalance" label="账户余额"> </el-table-column>
            <el-table-column align="center" prop="integration" label="积分"> </el-table-column>
            <el-table-column align="center" prop="growth" label="成长值"> </el-table-column>
            <el-table-column align="center" prop="historyIntegration" label="历史积分数量"> </el-table-column>
            <el-table-column align="center" prop="memberLevel.name" label="会员级别"></el-table-column>
            <el-table-column align="center" prop="address" label="地址"> </el-table-column>
            <el-table-column align="center" prop="email" label="邮箱"> </el-table-column>
<!--            <el-table-column align="center" prop="pathFront" label="正面证件照"> </el-table-column>-->
<!--            <el-table-column align="center" prop="pathReverse" label="反面证件照"> </el-table-column>-->
            <el-table-column align="center" prop="licenseNo" label="驾照号"> </el-table-column>
            <el-table-column align="center" prop="credentialsType" label="证件类型"> </el-table-column>
            <el-table-column align="center" prop="idNumber" label="证件号"> </el-table-column>
            <el-table-column align="center" prop="newOrder" label="新老用户">
                <template slot-scope="scope">
                    <p v-if="scope.row.sex=='0' ">
                        新用户
                    </p >
                    <p v-else-if="scope.row.sex=='1'">
                        老用户
                    </p >
                </template>
            </el-table-column>
<!--            <el-table-column align="center" prop="token" label="token值"> </el-table-column>-->

            <el-table-column align="center" prop="status" label="状态">
                <template  slot-scope="scope">
                    <el-tag type="success"  :type="getStatusColor(scope.row.status)">{{getStatusName(scope.row.status)}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="300px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="small" @click="updateRole(scope.row)" icon="el-icon-edit" type="success">编辑</el-button>
                    <el-button size="small" @click="deleteRole(scope.$index,scope.row)" icon="el-icon-delete" type="danger">删除</el-button>
                    <el-button type="warning" size="mini" @click='preference(scope.row)'>优惠</el-button>
<!--                    <el-button size="small" @click="setPower(scope.$index, scope.row)" icon="el-icon-star-off" type="primary">分配功能</el-button>-->
                </template>
            </el-table-column>
        </el-table>
            <!--分页功能-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="优惠" :visible.sync="dialogVisibleCounts" width="80%">
            <dis-counts :clientId="clientForm.id"/>
        </el-dialog>

            <!--新增Form -->
            <el-dialog title="会员管理" :visible.sync="addRoleState" >
                <el-form :model="form">
<!--                    <el-form  label-width="80px" :model="form" ref="addFormRef" >-->
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.1.49:9999/common/upload/sure"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :model="addRoleState.headPic">
                            <img v-if="headPic" :src="headPic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
<!--                    </el-form>-->

                    <el-form-item label="会员名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" placeholder="会员名称" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio v-model="form.status" label="0">启用</el-radio>
                        <el-radio v-model="form.status" label="1">禁止</el-radio>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-radio v-model="form.sex" label="0">男</el-radio>
                        <el-radio v-model="form.sex" label="1">女</el-radio>
                    </el-form-item>
                    <el-form-item label="账号" :label-width="formLabelWidth">
                        <el-input v-model="form.username" placeholder="账号" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" placeholder="密码" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phoneNum" placeholder="手机号" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" placeholder="地址" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="驾照号" :label-width="formLabelWidth">
                        <el-input v-model="form.licenseNo" placeholder="驾照号" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addRoleState = false">取 消</el-button>
                    <el-button type="primary" @click="saveRole">确 定</el-button>
                </div>
            </el-dialog>
<!--修改-->
        <el-dialog title="会员管理" :visible.sync="editRoleState">
            <el-form :model="edform">
                <el-upload
                        class="avatar-uploader"
                        :headers="headerObj"
                        action="http://192.168.1.49:9999/common/upload/sure"
                        :auto-upload="true"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :model="edform.headPic"
                >
                    <img v-if="headPic" :src="headPic" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>


                <el-form-item label="会员名称" :label-width="formLabelWidth">
                    <el-input v-model="edform.name" placeholder="会员名称" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio v-model="edform.status" :label="0">启用</el-radio>
                    <el-radio v-model="edform.status" :label="1">禁止</el-radio>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio v-model="edform.sex" label="0">男</el-radio>
                    <el-radio v-model="edform.sex" label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="edform.phoneNum" placeholder="手机号" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="edform.address" placeholder="地址" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="驾照号" :label-width="formLabelWidth">
                    <el-input v-model="edform.licenseNo" placeholder="驾照号" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editRoleState = false">取 消</el-button>
                <el-button type="primary" @click="sRole">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import DisCounts from '@/components/utils/DisCounts'

Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 5,
            total: 0,
            ClientVo:{},
            tableData: [],
            powerData: [],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            headPic:'',
            edform:{},
            page: {},
            clientForm:{},
            form: { status: '0' },
            powerform: {},
            formLabelWidth: '80px',
            editRoleState: false,
            editRolePower: false,
            addRoleState:false,
            menuTreeVisible: false,
            nodeChecked: [], //默认会员选中的权限菜单
            dialogVisibleCounts:false,
        };
    },
    components:{
        DisCounts
    },
    created: function () {

        this.load();
    },
    computed: {
        headerObj(){
            return{
                // token:localStorage.getItem("token")
                token: this.token
            };
        }
    },
    methods: {
        //初始化数据
        load() {
            //页面初始化时，加载的方法
            this.$http.post("client/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,this.ClientVo).then((response) => {
                    console.log(response.data);
                    this.tableData = response.data.data.list;
                    this.total = response.data.data.total;
                });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.ClientVo = {};
            this.load();
        },

        // getStatusName(row, column, cellValue) {
        //     return cellValue == 0 ? '启动' : '禁用';
        // },

        updateRole(row) {
            this.edform=row
            this.editRoleState = true;
            this.headPic = row.headPic;
        },
        sRole(){
            console.log(this.edform)
            this.edform.headPic=this.headPic;
            this.$http.put("/client/updateById",this.edform).then(resp=>{
                if (resp.data.code === 200){
                    this.$message.success("修改成功");
                    this.editRoleState=false;
                    this.load();
                }
            })
        },

        deleteRole: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    axios.delete('client/delete?id=' + row.id)
                        .then(function (response) {
                            console.log(response);
                            if (response.data.code === 200) {
                                // if (response.data > 0) {
                                    //提示成功
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    //重新加载数据
                                    _this.load();
                                }
                            // }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        getStatusName(status) {
            // return cellValue == 1 ? '启用' : '禁用';
            var tmpType = '';
            if (status == 0) {
                tmpType = '启用';
            } else if (status === 1) {
                tmpType = '禁用';
            }
            return tmpType;
        },
        getStatusColor(status) {
            // return cellValue == 1 ? '启用' : '禁用';
            var tmpType = '';
            if (status === 0) {
                tmpType = 'success';
            }else if (status === 1) {
                tmpType = 'danger';
            }
            return tmpType;
        },
        preference(row){
            // console.log(row)
            this.dialogVisibleCounts = true;
            this.clientForm = row;
            console.log(this.clientForm.id)
        },

        // setPower: function (index, row) {
        //     //给会员ID复制
        //     this.roleId = row.roleId;
        //     var _this = this;
        //     //初始化数据
        //     axios.get('http://localhost:9999/mbs/client/selectMenuTree').then(function (response) {
        //         let tmpData = response.data.data;
        //         _this.treeData = tmpData;
        //         //查询并给勾选项赋值
        //         axios.get('http://localhost:9999/mbs/client/selectAllMenuByRoleId?roleId=' + _this.roleId).then(function (response) {
        //             _this.nodeChecked = response.data.data;
        //         });
        //     });
        //     //显示权限菜单对话框
        //     this.menuTreeVisible = true;
        // },
        // addRoleAndMenus() {
        //     //获取重新选中的节点
        //     let nodes = this.$refs.menuTree.getCheckedNodes();
        //     //判断至少选中一个节点
        //     if (nodes.length < 1) {
        //         this.$message.error('至少选中一个节点');
        //         return;
        //     }
        //     let tempMenuIds = '';
        //     //循环遍历
        //     for (var i = 0; i < nodes.length; i++) {
        //         tempMenuIds += nodes[i].id + ',';
        //     }
        //     tempMenuIds = tempMenuIds.substr(0, tempMenuIds.length - 1);
        //     console.log('当前会员为：' + this.roleId + '，该会员对应新的权限ID为：' + tempMenuIds);
        //     var _this = this;
        //     //执行后台添加方法
        //     axios
        //         .post('http://localhost:9999/mbs/client/addRoleAndMenu?roleId=' + this.roleId + '&menuIds=' + tempMenuIds)
        //         .then(function (response) {
        //             console.log(response);
        //             if (response.status == 200) {
        //                 if (response.data > 0) {
        //                     //提示成功
        //                     _this.$message({
        //                         type: 'success',
        //                         message: '授权成功!'
        //                     });
        //                     //关闭弹框
        //                     _this.menuTreeVisible = false;
        //                     //重新加载数据
        //                     _this.load();
        //                 }
        //             }
        //         })
        //         .catch(function (error) {
        //             console.log(error);
        //             _this.$message.error('你错了。。。');
        //         });
        // },

        handleAvatarSuccess(res, file) {
            // this.headPic = URL.createObjectURL(file.raw);
            console.log(res.data);
            console.log(file);
            this.headPic = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        saveRole() {
            this.form.headPic=this.headPic;
            this.$http.post("/client/insert",this.form).then(resp=>{
                if (resp.data.code ===200){
                    this.addRoleState = false;
                    this.$message.success("添加成功");
                    this.load();
                }
            })
        },

        addBtn() {
            this.form = {};
            this.addRoleState = true;
            this.headPic="";
            this.$refs.addFormRef.resetFields();

        },
        // importBtn() {
        //     var _this = this;
        //     axios
        //         .post('http://localhost:9999/mbs/client/importExcel')
        //         .then(function (response) {
        //             _this.$message.success('导入成功！');
        //             _this.load();
        //         })
        //         .catch(function (error) {
        //             _this.$message.error('导入失败！');
        //             console.log(error);
        //         });
        // },
        // exportBtn() {
        //     window.location.href = '/mbs/client/exportExcel';
        // }
    }
};
</script>
<style>

/*.el-upload {*/
/*    width: 62px;*/
/*    height: 33px;*/
/*    display: inline-block;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*    outline: 0;*/
/*}*/
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    width: 360px;
    height: 180px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 40px;
    color: #8c939d;
    width: 350px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}
</style>
